<template>
  <div>
    <div class="line-box">
      <div class="title">身份验证信息</div>
      <div>
        <el-button @click="Backtop()">
          < 返回登录</el-button>
      </div>
    </div>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
      label-position="left">
      <el-form-item prop="username">
        <span class="svg-container">
          <i class="iconphone el-icon-mobile-phone"></i>
        </span>
        <el-input ref="username" v-model="loginForm.username" placeholder="请输入账号" name="username" type="text"
          tabindex="1" auto-complete="on" />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <i class="iconCode iconfont icon-yanzhengma"></i>
        </span>
        <el-input ref="password" v-model="loginForm.password" type="text" class="code-input" placeholder="请输入验证码"
          name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
        <div class="code-btn" @click="getCode()">
          {{ codeText }}
        </div>
      </el-form-item>

      <el-button class="login-btn" :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px"
        @click.native.prevent="handleLogin">
        登录
      </el-button>

      <div class="tip-choose">
        <el-checkbox v-model="checked">
          登录即同意
          <a href="#">《用户协议》</a>
          和
          <a href="#">隐私协议</a>
        </el-checkbox>
      </div>
    </el-form>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import { getCode, signLogin } from '@/api/login'
export default {
  name: 'Bind',
  props: {
    openid: {
      type: String,
      default: ''
    }
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (validUsername(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length <= 0) {
        callback(new Error('请输入验证码'))
      } else {
        callback()
      }
    }
    return {
      AppID: process.env.AppID,
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', validator: validateUsername }
        ],
        password: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ]
      },
      loading: false,
      redirect: undefined,
      checked: false,
      // 验证码
      codeValue: '',
      codeText: '获取验证码',
      timeInter: null
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  beforeDestroy() {
    this.codeText = '获取验证码'
    clearInterval(this.timeInter)
  },
  methods: {
    Backtop() {
      this.$emit('runTo', { type: 'login', data: '' })
    },
    getCode() {
      const that = this
      if (validUsername(this.loginForm.username)) {
        this.$message({
          message: '请输入正确的手机号',
          type: 'warning'
        })
        return false
      }
      if (this.codeText === '获取验证码') {
        let time = 60
        that.timeInter = setInterval(function () {
          time--
          that.codeText = time
          if (time <= 0) {
            time = 0
            that.codeText = '获取验证码'
            clearInterval(that.timeInter)
          }
        }, 1000)
        this.getCode2()
      }
    },
    getCode2() {
      const data = {
        phone: this.loginForm.username
      }
      getCode(data)
        .then((res) => {
          this.codeValue = res.data
        })
        .catch(() => {
          this.codeText = '获取验证码'
          clearInterval(this.timeInter)
        })
    },
    handleLogin() {
      const that = this
      if (validUsername(this.loginForm.username)) {
        this.$message({
          message: '请输入正确的手机号',
          type: 'warning'
        })
        return false
      }
      if (
        this.loginForm.password === ''
        // ||
        // this.loginForm.password !== this.codeValue
      ) {
        this.$message({
          message: '请输入正确的验证码',
          type: 'warning'
        })
        return false
      }
      if (this.checked) {
        this.handleLogin3()
      } else {
        this.$confirm('默认登录即同意, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            that.checked = true
            that.handleLogin3()
          })
          .catch(() => {
            //
          })
      }
    },
    // handleLogin2() {
    //   this.loading = true
    //   const data = {
    //     phone: this.loginForm.username,
    //     code: this.loginForm.password,
    //     official_openid: this.openid
    //   }
    //   signLogin(data)
    //     .then((res) => {
    //       // console.log('res', res)
    //       this.$message({
    //         message: '绑定成功，已登录！',
    //         type: 'success'
    //       })
    //       this.handleLogin3()
    //       // this.Backtop()
    //     })
    //     .catch(() => {
    //       this.$message({
    //         message: '绑定失败！',
    //         type: 'warning'
    //       })
    //       return false
    //     })
    // },
    handleLogin3() {
      this.loading = true
      const data = {
        phone: this.loginForm.username,
        code: this.loginForm.password,
        official_openid: this.openid
      }
      this.$store
        .dispatch('user/login', data)
        .then(() => {
          this.$router.push({ path: '/' })
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      font-size: 16px;
      color: #999999;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    border-bottom: 1px solid #e0e0e0;
    background: none;
    border-radius: 5px;
    color: #454545;
    position: relative;

    .code-input {
      padding-right: 160px;
    }

    .code-btn {
      position: absolute;
      right: 0;
      top: 10px;
      width: 112px;
      height: 34px;
      line-height: 34px;
      background: #04d1b8;
      border-radius: 4px;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      cursor: pointer;
    }

    .code-btn:hover {
      scale: 0.98;
    }
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.line-box {
  width: 400px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-form {
  position: relative;
  width: 400px;
  max-width: 100%;
  margin-top: 30px;
  overflow: hidden;

  .iconphone {
    font-size: 20px;
  }

  .login-btn {
    height: 60px;
    background: linear-gradient(90deg, #39d9c6 0%, #39cfa2 100%);
    border-radius: 4px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
  }
}

.tips {
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;

  span {
    &:first-of-type {
      margin-right: 16px;
    }
  }
}

.svg-container {
  padding: 6px 5px 6px 15px;
  color: $dark_gray;
  vertical-align: middle;
  width: 30px;
  display: inline-block;
}

.show-pwd {
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  user-select: none;
}

.tip-choose {
  text-align: left;
  color: #9e9e9e;

  a {
    color: #0e8db5;
  }
}
</style>
